<template>
  <div class="app-container">
    <!--    <div class="bg-common pd-lr25 pd-tb10">-->
    <!--      {{projectName +" "}}楼栋策划-->
    <!--    </div>-->
    <div class="hor mg-b-10">
      <!--      <el-select v-model="selectProjectId" placeholder="选择项目" clearable @change="onProjectChange"-->
      <!--                 class="">-->
      <!--        <el-option-->
      <!--          v-for="(item,index) in projectList"-->
      <!--          :key="index"-->
      <!--          :label="item.name"-->
      <!--          :value="item.id">-->
      <!--        </el-option>-->
      <!--      </el-select>-->

      <el-button type="primary" icon="el-icon-search" @click="onClickSearch()" class="">刷新
      </el-button>
      <div class="flex1"></div>
      <!--      <el-popconfirm-->
      <!--        class="mg-l-10"-->
      <!--        title="是否导出选中列？"-->
      <!--        icon="el-icon-info"-->
      <!--        iconColor="red"-->
      <!--        confirmButtonText='导出'-->
      <!--        @confirm="onClickExport()">-->
      <!--        <el-button slot="reference" type="warning">导出</el-button>-->
      <!--      </el-popconfirm>-->
      <!--      <el-button type="primary" icon="el-icon-plus" class="mg-l-10"-->
      <!--                 @click="onClickShowHuXingItem">项目门牌号管理-->
      <!--      </el-button>-->
      <el-button size="min" type="primary" icon="el-icon-plus" class="mg-l-10 "
                 @click="onClickShowHuXingItem">项目户型管理
      </el-button>
      <el-button type="primary" icon="el-icon-plus" class="mg-l-10"
                 @click="onClickAdd()">新增楼栋
      </el-button>
      <!--      <el-button-group class="mg-l-10">-->
      <!--        <el-tooltip class="item" effect="dark" content="删除后无法恢复" placement="bottom">-->
      <!--          <el-button type="danger"-->
      <!--                     @click="isHadPermission([''])?onDeleteDialogShow = true:noPermissionHint();">-->
      <!--            删除-->
      <!--          </el-button>-->
      <!--        </el-tooltip>-->
      <!--      </el-button-group>-->
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="allList"
      :height="autoHeight"
      element-loading-text="Loading"
      :cell-style="{padding: '5'}"
      @cell-click="onCellClick"
      @selection-change="handleSelectionChange"
      @row-click="onItemClick"
      @row-dblclick="onItemDoubleClick"
      border
      fit
      highlight-current-row
    >
      <!--      <el-table-column-->
      <!--        type="selection"-->
      <!--        width="55">-->
      <!--      </el-table-column>-->
      <!--      <el-table-column align="center" label="ID" width="150">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.id}}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="项目" width="230" :align="textAlign">
        <template slot-scope="scope">
          {{ scope.row.project.name }}
        </template>
      </el-table-column>
      <el-table-column label="楼栋号" width="150" :align="textAlign">
        <template slot-scope="scope">
          {{ scope.row.dongHao }}
        </template>
      </el-table-column>
      <el-table-column label="单元号" width="150" :align="textAlign">
        <template slot-scope="scope">
          {{ scope.row.danYuan }}
        </template>
      </el-table-column>
      <el-table-column label="业态" width="80" :align="textAlign">
        <template slot-scope="scope">
          {{ yeTaiList[scope.row.yeTai-1].name}}
        </template>
      </el-table-column>
      <!--      <el-table-column label="标准层面积" width="100" :align="textAlign">-->
      <!--        <template slot-scope="scope"> {{ scope.row.biaoZhunCengMianJi }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="楼层数" width="180" :align="textAlign">
        <template slot-scope="scope">
          <div class="ver">
            <div> 地上：{{ scope.row.louCengCount }}层</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="备注" :align="textAlign">
        <template slot-scope="scope"> {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" width="400" align="center">
        <template slot-scope="scope">
          <div class="hor hor-center">
            <el-button type="primary" size="small"
                       @click.stop="onClickView(scope.row)">查看信息
            </el-button>
            <el-button type="warning" size="small"
                       @click.stop="onClickYouHuiZheKou(scope.row)">优惠折扣
            </el-button>
            <!--            <el-button type="warning" size="small"-->
            <!--                       @click.stop="onClickLouCengDesign(scope.row)">楼层参数策划-->
            <!--            </el-button>-->

            <el-button type="warning" size="small"
                       @click.stop="onClickDingJiaYiJu(scope.row)">定价依据
            </el-button>
            <el-popconfirm
              class="mg-l-10"
              title="提示：确认删除该楼栋吗？"
              icon="el-icon-question"
              iconColor="red"
              confirmButtonText='确定'
              @confirm="onClickDelete(scope.row)">
              <el-button slot="reference" type="danger" size="small" :loading="onDeleteLoading">删除
              </el-button>

            </el-popconfirm>

          </div>

        </template>
      </el-table-column>
    </el-table>
    <div class="hor">
      <div class="flex1"></div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="mg-t-10">
      </el-pagination>
    </div>
    <el-dialog
      title="信息"
      :visible.sync="infoDialogShow"
      width="700px"
      @open="onDialogOpen"
      center>
      <div class="ver match-width">
        <div class="ver match-width">
          <el-row class="mg-lr-10">
            <div class="hor ver-center ver-center mg-t-20">
              <div style="width: 120px;" class="font14 font-text-color-main-title">业态</div>
              <el-col :span="11">
                <el-select style="width: 100%" v-model="detail.yeTai" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in yeTaiList"
                    :key="index"
                    :label="item.name"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </div>
            <div class="hor ver-center ver-center mg-t-20">
              <div style="width: 120px;" class="font14 font-text-color-main-title">折扣方式</div>
              <el-col :span="11">
                <el-select style="width: 100%" v-model="detail.zheKouType"
                           placeholder="请选择">
                  <el-option
                    label="先乘后减（实收总价=标准总价*（1-3%）-120000-500*房间建筑面积）"
                    :value="1">
                  </el-option>
                  <el-option
                    label="先减后乘（实收总价=（标准总价-120000-500*房间建筑面积）*（1-3%））"
                    :value="2">
                  </el-option>
                  <el-option
                    label="先乘后减再乘（实收总价=（标准总价*（1-2%）-120000-500*房间建筑面积）*(1-1%)）"
                    :value="3">
                  </el-option>
                  <el-option
                    label="先减后乘再减1（实收总价=（标准总价-100000-500*房间建筑面积）*（1-3%）-20000）"
                    :value="4">
                  </el-option>
                  <el-option
                    label="先减后乘再减2（实收总价=（标准总价-120000）*（1-3%）-（500*房间建筑面积））"
                    :value="5">
                  </el-option>
                </el-select>
              </el-col>
            </div>
            <div class="hor ver-center ver-center mg-t-20">
              <div style="width: 120px;" class="font14 font-text-color-main-title">地上层数</div>
              <el-col :span="11">
                <!--                <el-input class="flex1 font-text-color-main-title" type="number" min="0"-->
                <!--                          @keyup.native="prevent($event)"-->
                <!--                          :disabled="detail.id!=null"-->
                <!--                          v-model="detail.louCengShuDiShang">-->
                <!--                </el-input>-->
                <el-input-number class="flex1 font-text-color-main-title my-number"
                                 style="width: 100%;"
                                 :min="0" :controls="true" :step="1" step-strictly
                                 v-model="detail.louCengCount" placeholder="请输入数字"/>

              </el-col>
              <div class="mg-l-10 font-color-red">只需写楼层数，不用填写 + 号</div>
            </div>
            <div class="hor ver-center ver-center mg-t-20">
              <div>
                <div style="width: 120px;" class="font14 font-text-color-main-title">楼栋号</div>
                <div class="font12 font-color-red">仅填写编号</div>
              </div>
              <el-col :span="11">
                <!--                <el-input class="flex1 font-text-color-main-title" type="number" min="0"-->
                <!--                          @keyup.native="prevent($event)"-->
                <!--                          :disabled="detail.id!=null"-->
                <!--                          v-model="detail.louCengShuDiXia">-->
                <!--                </el-input>-->

                <el-input-number class="flex1 font-text-color-main-title my-number"
                                 style="width: 100%;"
                                 :min="0" :controls="false" :step="1" step-strictly
                                 v-model="detail.dongHao" placeholder="请输入数字"/>
              </el-col>
            </div>
            <div class="hor ver-center ver-center mg-t-20">
              <div>
                <div style="width: 120px;" class="font14 font-text-color-main-title">单元号</div>
                <div class="font12 font-color-red">仅填写编号</div>
              </div>
              <el-col :span="11">
                <!--                <el-input class="flex1 font-text-color-main-title" type="number" min="0"-->
                <!--                          @keyup.native="prevent($event)"-->
                <!--                          :disabled="detail.id!=null"-->
                <!--                          v-model="detail.louCengShuDiXia">-->
                <!--                </el-input>-->

                <el-input-number class="flex1 font-text-color-main-title my-number"
                                 style="width: 100%;"
                                 :min="0" :controls="false" :step="1" step-strictly
                                 v-model="detail.danYuan" placeholder="请输入数字"/>
              </el-col>
            </div>
            <div class="hor ver-center ver-center mg-t-20">
              <div style="width: 120px;" class="font14 font-text-color-main-title">基价</div>
              <el-col :span="11">
                <!--                                <el-input class="flex1 font-text-color-main-title" type="number" min="0"-->
                <!--                                          @keyup.native="prevent($event)"-->
                <!--                                          :disabled="detail.id!=null"-->
                <!--                                          v-model="detail.louCengShuDiXia">-->
                <!--                                </el-input>-->

                <el-input-number class="flex1 font-text-color-main-title my-number"
                                 style="width: 100%;"
                                 :min="0" :controls="false" :step="1" step-strictly
                                 v-model="detail.priceBase" placeholder="请输入数字"/>
              </el-col>
            </div>
            <div class="hor ver-center ver-center mg-t-20">
              <div>
                <div style="width: 120px;" class="font14 font-text-color-main-title">涉及房号</div>
                <div class="font12 font-color-red">多个房号用，号隔开</div>
              </div>
              <el-col :span="11">
                <el-input class="flex1 font-text-color-main-title" type="string"
                          v-model="detail.fangHao">
                </el-input>

              </el-col>
            </div>
            <div class="hor ver-center ver-center mg-t-20">
              <div style="width: 120px;" class="font14 font-text-color-main-title">基价</div>
              <el-table
                class="mg-t-10"
                ref="table"
                v-loading="listLoading"
                :data="huxingItemList"
                :max-height="400"
                element-loading-text="Loading"
                border
                fit
                :close-on-click-modal="false"
                style="width: 100%">
                <el-table-column label="户型">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name"></el-input>
                  </template>
                </el-table-column>
                <!--        <el-table-column label="建筑面积" width="120">-->
                <!--          <template slot-scope="scope">-->
                <!--            <el-input v-model="scope.row.jianZhuMianJi"></el-input>-->
                <!--          </template>-->
                <!--        </el-table-column>-->
                <el-table-column label="面积">
                  <template slot-scope="scope">
                    上传文件后配置
                  </template>
                </el-table-column>
                <el-table-column label="朝向">
                  <template slot-scope="scope">
                    上传文件后配置
                  </template>
                </el-table-column>
                <el-table-column class-name="status-col" label="操作" align="center">
                  <template slot-scope="scope">
                    <div class="hor hor-center">
                      <el-button type="danger" icon="el-icon-edit" size="mini"
                                 :loading="onSaveLoading"
                                 @click.stop="onClickDeleteHuXingItem(scope.row,scope.$index)">删除
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>


            <div class="hor ver-center ver-center mg-t-20">
              <div style="width: 120px;" class="font14 font-text-color-main-title">备注</div>
              <el-col :span="18">
                <el-input class="flex1 font-text-color-main-title"
                          type="textarea"
                          v-model="detail.remark">
                </el-input>
              </el-col>
            </div>
          </el-row>
        </div>

        <div class="hor match-width ver-center hor-center mg-t-20">
          <el-button @click="infoDialogShow = false">取 消</el-button>
          <el-button type="primary" slot="reference" :loading="onSaveLoading" class="mg-l-10"
                     @click="onClickSave">保存
          </el-button>

        </div>

      </div>
    </el-dialog>

    <el-dialog
      :title="projectName+'的户型'"
      :visible.sync="huxingItemListDialogShow"
      width="780px"
      @open="onDialogOpen"
      center
      :close-on-click-modal="false"
    >
      <div class="hor">
        <el-button type="primary" icon="el-icon-search" @click="onClickSearch()" class=""
                   size="mini">刷新
        </el-button>
        <div class="flex1"></div>
        <el-button type="primary" icon="el-icon-plus" class="mg-l-10" size="mini"
                   @click="addRow()">添加
        </el-button>
      </div>
      <el-table
        class="mg-t-10"
        ref="table"
        v-loading="listLoading"
        :data="huxingItemList"
        :max-height="400"
        element-loading-text="Loading"
        border
        fit
        :close-on-click-modal="false"
        style="width: 100%">
        <el-table-column label="户型名称" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <!--        <el-table-column label="建筑面积" width="120">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-input v-model="scope.row.jianZhuMianJi"></el-input>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="是否为跃层" width="200">
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.shiFouYueCeng">
              <el-radio :label="false">否</el-radio>
              <el-radio :label="true">是</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <!--        <el-table-column label="户型图" >-->
        <!--          <template slot-scope="scope">-->
        <!--            <div class="hor ver-center hor-center">-->
        <!--              <el-upload-->
        <!--                action="#"-->
        <!--                class=""-->
        <!--                ref="upload"-->
        <!--                :auto-upload="false"-->
        <!--                accept="image/*"-->
        <!--                :on-change="uploadHuXingPicture"-->
        <!--                multiple-->
        <!--                :show-file-list="false">-->
        <!--                <div class="" v-if="scope.row.fileAbsPath != null" >-->
        <!--                  <el-button size="mini" icon="el-icon-picture" @click="openToFile(scope.row.fileAbsPathUrl)"></el-button>-->
        <!--                  <el-button size="mini" type="danger" :loading="deleteLoading"-->
        <!--                             @click.stop="toFileRemove(scope.$index)"-->
        <!--                             class="">移除</el-button>-->
        <!--                </div>-->
        <!--                <div class="" v-if="scope.row.fileAbsPath == null">-->
        <!--                  <el-button size="mini" type="primary"-->
        <!--                             @click="onClickUpload(scope.row,scope.$index)"-->
        <!--                             class="click-upload">上传-->
        <!--                  </el-button>-->
        <!--                </div>-->
        <!--              </el-upload>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column class-name="status-col" label="操作" align="center">
          <template slot-scope="scope">
            <div class="hor hor-center">
              <el-button type="danger" icon="el-icon-edit" size="mini" :loading="onSaveLoading"
                         @click.stop="onClickDeleteHuXingItem(scope.row,scope.$index)">删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="hor match-width ver-center hor-center mg-t-20">
        <el-button size="mini" @click="huxingItemListDialogShow = false">取 消</el-button>
        <el-button size="mini" type="primary" slot="reference" :loading="onSaveLoading"
                   class="mg-l-10"
                   @click="onClickSaveHuXingItem">保存
        </el-button>

      </div>
    </el-dialog>


    <el-dialog
      title="提示"
      :visible.sync="onDeleteDialogShow"
      width="30%">
      <span>删除后无法恢复</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onDeleteDialogShow = false">取消</el-button>
        <el-button type="danger" @click="batchDelete()" :loading="onDeleteLoading">删除</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="预览"
      :visible.sync="onPreviewPdfShow"
      append-to-body
      width="50%">
      <div id="pdf-content-file" class="flex1" :style="{height:(autoHeight-330)+'px'}">

      </div>
    </el-dialog>
  </div>

</template>
<style>
</style>
<script>
  import InputRange from "@/components/inutRange";

  const request = require('@/api/project/loudong')
  const requestHuXingItem = require('@/api/project/huxingItem')
  const requestProject = require('@/api/project/project')
  const requestFile = require('@/api/file/upload')
  import {getCityData} from '@/js/cityData.js'
  import pdf from 'pdfobject'

  import inputRange from '@/components/inutRange'
  import qs from "qs"

  let _this;
  export default {
    components: {},
    filters: {
      // statusFilter(status) {
      //   const statusMap = {
      //     published: 'success',
      //     draft: 'gray',
      //     deleted: 'danger'
      //   }
      //   return statusMap[status]
      // }
    },
    data() {
      return {
        textAlign: "center",
        pingStyle: {'border-color': '#3594f1', 'color': '#3594f1'},
        yueStyle: {'border-color': '#3564f1', 'color': '#3564f1'},//跃层时
        allList: null,
        page: 1,
        size: 20,
        total: 0,
        autoHeight: 800,//根据屏幕高度自动计算的高度
        //筛选参数
        params: {},
        selectRowList: [],
        onDeleteDialogShow: false,
        onDeleteLoading: false,
        selectProjectId: null,
        projectList: [],
        projectName: "",
        //信息窗口
        infoDialogShow: false,
        detail: {
          huXingList: [],
          fangJianFileList: [],
          gouJianFileList: []
        },
        onPreviewPdfShow: false,
        onSaveLoading: false,
        regionList: [],
        updateLongDongList: [],
        yeTaiList: [
          {
            name: "高层 ",
            value: 1
          },
          {
            name: "小高层",
            value: 2
          },
          {
            name: "洋房",
            value: 3
          },
          {
            name: "别墅",
            value: 4
          },
          {
            name: "商业",
            value: 5
          }, {
            name: "地下室",
            value: 6
          }
        ],
        //户型(门牌号)item弹窗
        huxingItemListDialogShow: false,
        huxingItemList: [],

        listLoading: true,
        chooseProjectId: null
      }
    }, beforeMount() {


      this.authHeight = document.body.scrollHeight - 190
      this.regionList = getCityData();
      this.selectProjectId = this.$route.query.selectProjectId
      this.projectName = this.$route.query.projectName;
      window.document.title = "楼栋管理-" + this.projectName + "项目"
      //去掉第三级的信息
      for (let i = 0; i < this.regionList.length; i++) {
        if (this.regionList[i].children != null && this.regionList[i].children.length > 0) {
          for (let j = 0; j < this.regionList[i].children.length; j++) {
            this.regionList[i].children[j].children = null
          }
        }
      }
    }, mounted() {
      _this = this
      this.fetchData()
      this.getAllProject();

    },
    created() {

    },
    methods: {
      onRefresh(chooseProjectId) {
        this.chooseProjectId = chooseProjectId
        this.fetchData()
        this.getAllProject();
      },
      dayuzero(e) {
        if (e.target.value < 0) {
          e.target.value = ''
        }
      },
      prevent(e) {
        //获取键盘码
        var keynum = window.event ? e.keyCode : e.which;
        if (keynum == 189 || keynum == 190 || keynum == 109 || keynum == 110) {
          this.$message.warning('禁止输入小数以及负数')
          e.target.value = ''
        }
        if (keynum == 69) {
          this.$message.warning('不识别自然数e')
          e.target.value = ''
        }
      },
      fangJianBianHaoTuZhiQuJian(val) {
        var data = val.data;

        this.detail.fangJianFileList[val.index].max = data.max;
        this.detail.fangJianFileList[val.index].min = data.min;

      },
      gouJianTuZhiQuJian(val) {
        var data = val.data;
        this.detail.gouJianFileList[val.index].max = data.max;
        this.detail.gouJianFileList[val.index].min = data.min;
      },
      fetchData() {
        this.listLoading = true
        const data = new FormData()

        if (this.selectProjectId != null) {
          this.params["project.id"] = this.selectProjectId;
        }
        for (var key in this.params) {//直接去除掉空值的对象
          if (this.isEmpty(this.params[key])) {
            delete this.params[key]
          }
        }
        this.params["flag"] = 1;
        console.log(this.params)
        data.append('params', JSON.stringify(this.params))
        data.append('page', this.page)
        data.append('size', this.size)

        const sortList = []
        sortList.push(
          {
            direction: 'asc',
            property: 'dongHao'
          }
        )
        data.append('sortJsonStr', JSON.stringify(sortList))

        request.getList(data).then(response => {
          this.allList = response.data
          this.total = response.totalElements

          this.listLoading = false
        })
      }, getAllProject() {
        const data = new FormData()
        let params = {}
        data.append('params', JSON.stringify(params))
        data.append('page', 1)
        data.append('size', 99999)

        const sortList = []
        sortList.push(
          {
            direction: 'desc',
            property: 'createTime'
          }
        )
        data.append('sortJsonStr', JSON.stringify(sortList))

        requestProject.getList(data).then(response => {
          this.projectList = response.data
        })
      }, batchDelete() {

        const _this = this
        if (this.selectRowList == null || this.selectRowList.length == 0) {
          this.$message({
            message: '请选择对象',
            type: 'warning',
            duration: 1000
          })
          return
        }
        const array = []
        for (let i = 0; i < this.selectRowList.length; i++) {
          array.push(this.selectRowList[i].id)
        }
        const data = new FormData()
        data.append('ids', array)
        data.append('operate', 1)

        this.$message({
          message: '操作中',
          type: 'warning',
          duration: 1000
        })
        this.onDeleteLoading = true
        request.batchDelete(data).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 3000
          })
          this.onDeleteLoading = false
          this.onDeleteDialogShow = false
          _this.fetchData()
        }).catch((e) => {
          this.onDeleteLoading = false
        })
      }
      , handleSizeChange(val) {
        this.size = val
        this.fetchData()
      }, handleCurrentChange(val) {
        this.page = val
        this.fetchData()
      }, onClickSearch() {//点击搜索
        if (!this.isEmpty(this.searchName)) {
          this.params['name_like'] = ('%' + this.searchName.trim() + '%')
        } else {
          this.params['name_like'] = ''
        }
        if (!this.isEmpty(this.searchType)) {
          this.params['type_like'] = ('%' + this.searchType.trim() + '%')
        } else {
          this.params['type_like'] = ''
        }
        this.requestHuXingItemList()
        this.fetchData()
      }, onInputClear(type) {//1.姓名
        if (type === 1) {
          this.searchName = ''
        } else if (type === 2) {
          this.searchType = ''
        }
        this.onClickSearch()

      }, handleSelectionChange(rowList) {//多选变化监听
        this.selectRowList = rowList
      }, onCellClick(row, column, cell, event) {
        if (column.type == 'selection') {
          this.$refs.table.toggleRowSelection(row)
        }
      }
      , onItemClick(row) {//单行点击
      }
      , onItemDoubleClick(row) {//单行双击
        this.onClickView(row)
      }
      , onClickAdd() {
        if (this.selectProjectId == null) {
          this.$message({
            message: '请先选择项目',
            type: 'warning',
            duration: 2000
          })
          return
        }
        this.detail = {
          project: {
            id: this.selectProjectId
          },
          company: {},
          huXingList: []
        };
        this.infoDialogShow = true

        // this.requestNewDetail()
        this.getHuXingDetailListByProject(this.selectProjectId)
      }, onDialogOpen() {
      }, onPositionDialogOpen() {
        this.$refs.map.initMap()
      },
      //预览pdf
      onClickViewFileAbsPath(row) {
        pdf.embed("", "#pdf-content-file");
        let that = this;
        that.onPreviewPdfShow = true;
        setTimeout(function () {
          pdf.embed(row.fileUrl, "#pdf-content-file");
        }, 100)
      },
      onClickSave() {//点击保存
        this.enterVisible = false
        if (this.isEmpty(this.detail.zheKouType)) {
          this.$message({
            message: '请先选择计算规则',
            type: 'warning',
            duration: 2000
          })
          return
        }
        //延迟保存等待图纸失去焦点数据计算
        // let that = this;
        // setTimeout(function () {
        _this.requestSave();
        // }, 500);

      }, onClickView(row) {
        this.infoDialogShow = true
        this.detail = JSON.parse(JSON.stringify(row));
        if (this.detail.company == null) {
          this.detail.company = {};
        }
        this.requestDetail(row.id)
      }, onClickYouHuiZheKou(row) {
        const {href} = this.$router.resolve({
          path: "/youHuiZheKou/youHuiZheKou?louDongId=" + row.id + "&projectName=" + this.projectName + "&dongHao=" + row.dongHao
        })
        window.open(href, '_blank')//新窗口打开页面会卡死所以不开新窗口
        // window.location.href = href
      }, onClickDingJiaYiJu(row) {
        const {href} = this.$router.resolve({
          path: "/fullScreen/dingJiaYiJu?louDongId=" + row.id + "&projectName=" + this.projectName + "&dongHao=" + row.dongHao
        })
        window.open(href, '_blank')//新窗口打开页面会卡死所以不开新窗口
        // window.location.href = href
      }, requestSave() {
        this.onSaveLoading = true
        const data = new FormData()
        this.detail.louDongJson = JSON.stringify(this.updateLongDongList)
        data.append('json', JSON.stringify(this.detail));
        request.saveByJson(data).then(response => {
          this.onSaveLoading = false
          this.infoDialogShow = false
          this.$message({
            message: '保存成功',
            type: 'success',
            duration: 2000
          })
          this.fetchData()
        }).catch((e) => {
          this.onSaveLoading = false
        })
      }, onProjectChange(val) {
        this.params["project.id"] = val + ''
        this.fetchData()
      }
      , onClickShowHuXingItem() {
        if (this.selectProjectId == null) {
          this.$message({
            message: '请先选择项目',
            type: 'warning',
            duration: 2000
          })
          return
        }
        this.huxingItemListDialogShow = true;
        this.requestHuXingItemList();
      }, requestNewDetail() {//请求户型(门牌号)item 的列表
        const data = new FormData()
        data.append('projectId', this.selectProjectId);

        request.getHuXingDetailList(data).then(response => {
          let list = response.data

          _this.detail.huXingList = list;

        })
      }
      , requestDetail(id) {//请求户型item 的列表
        const data = new FormData()
        data.append('id', id);
        this.updateLongDongList = [];
        request.getDetailById(data).then(response => {
          this.detail = response.data
          this.updateLongDongList = JSON.parse(response.data.louDongJson)
          this.getHuXingDetailListByProject(this.selectProjectId)
        })
      }, updateLouDongHuXing() {//请求户型item 的列表
        const data = new FormData()
        data.append('id', this.detail.id);

        request.updateLouDongHuXing(data).then(response => {
          this.detail = response.data
        })
      }
      , requestHuXingItemList() {//请求户型item 的列表
        this.listLoading = false

        const data = new FormData()
        let params = {
          "flag": 1
        }
        params["project.id"] = this.selectProjectId
        data.append('params', JSON.stringify(params))
        data.append('page', 1)
        data.append('size', 99999)

        const sortList = []
        sortList.push(
          {
            direction: 'asc',
            property: 'name'
          }
        )
        data.append('sortJsonStr', JSON.stringify(sortList))

        requestHuXingItem.getList(data).then(response => {
          this.huxingItemList = response.data
          this.listLoading = false
        })
      },

      //增加行
      addRow() {
        let newRow = {id: null, name: '', jianZhuMianJi: '', shiFouYueCeng: false}
        this.huxingItemList.push(newRow)
      },
      //保存实测楼层坍落度
      onInputChangeSaveHx(row, index) {
        this.huxingItemDetail = {
          project: {
            id: this.selectProjectId
          }
        }
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.huxingItemDetail.id = this.huxingItemList[index].id
          this.huxingItemDetail.name = row.name
          this.huxingItemDetail.jianZhuMianJi = row.jianZhuMianJi
          this.huxingItemDetail.shiFouYueCeng = row.shiFouYueCeng
          this.onClickSaveHuXingItem(this.huxingItemDetail, index)
          this.huxingItemDetail = {}
        }, 500);
      },

      onClickSaveHuXingItem() {
        for (let i = 0; i < this.huxingItemList.length; i++) {

          if (this.isEmpty(this.huxingItemList[i].name)) {
            this.$message({
              message: '请填写名称',
              type: 'warning',
              duration: 2000
            })
            return;
          }
          // if (this.isEmpty(this.huxingItemList[i].jianZhuMianJi)) {
          //   this.$message({
          //     message: '请填写面积',
          //     type: 'warning',
          //     duration: 2000
          //   })
          //   return;
          // }
          if (this.huxingItemList[i].shiFouYueCeng == null) {
            this.$message({
              message: '请选择是否为跃层',
              type: 'warning',
              duration: 2000
            })
            return;
          }
          this.huxingItemList[i].project = {
            id: this.selectProjectId
          }
        }

        this.onSaveLoading = true
        const data = new FormData();
        data.append('json', JSON.stringify(this.huxingItemList));
        requestHuXingItem.saveByJson(data).then(response => {
          this.onSaveLoading = false
          this.$message({
            message: '保存成功',
            type: 'success',
            duration: 2000
          })
          this.huxingItemListDialogShow = false
          this.requestHuXingItemList()
          // let data = response.data;
          // this.huxingItemList[index].id = data.id;
          // this.huxingItemList[index].name = data.name;
          // this.huxingItemList[index].jianZhuMianJi = data.jianZhuMianJi;
          // this.huxingItemList[index].shiFouYueCeng = data.shiFouYueCeng;
          // this.requestHuXingItemList()  用户可能连续添加多个空行，故不自动刷新
        }).catch((e) => {
          this.onSaveLoading = false
        })
      }, onClickDeleteHuXingItem(row, index) {
        this.$confirm('是否确定删除', '提示', {
          showCancelButton: true,
          confirmButtonText: "删除",
          closeOnClickModal: false,
          showClose: false,
          closeOnPressEscape: false,
          closeOnHashChange: false
        }).then(_ => {
          this.onDeleteLoading = true;

          const data = new FormData()
          data.append('ids', [row.id])

          requestHuXingItem.batchDelete(data).then(response => {
            this.onDeleteLoading = false;
            this.huxingItemList.splice(index, 1)
            _this.$message({
              message: "删除成功",
              type: 'success',
              duration: 3000
            })

            // _this.requestHuXingItemList()
          })
          this.onDeleteLoading = false;
        }).catch(_ => {
          this.onDeleteLoading = false;
        });
      }, onClickDelete(row) {
        this.selectRowList = [];
        this.selectRowList.push(row)
        this.batchDelete()
      }, onClickViewImg(row) {
        console.log(row)
        this.deleteFangJianFileIds = [];
        this.deleteGouJianFileIds = [];
        this.detail = JSON.parse(JSON.stringify(row));
      }, onClickLouCengDesign(row) {
        const {href} = this.$router.resolve({
          path: "/shice/louCengDesign?louDongGroupId=" + row.id + "&projectName=" + row.project.name + "&louDongGroupName=" + row.dongHao
        })
        // window.open(href, '_blank')//新窗口打开页面会卡死所以不开新窗口
        window.location.href = href
      }, onClickAddNewFangJianImg() {
        let data = {
          louDongGroup: {
            id: this.detail.id,
            fileAbsPath: null
          }
        };
        this.detail.fangJianFileList.push(data)
      }, onClickAddNewGouJianImg() {
        let data = {
          louDongGroup: {
            id: this.detail.id,
            fileAbsPath: null
          }
        };
        this.detail.gouJianFileList.push(data)
      }, onClickUpload(row, type, index) {//type 1.房间图纸上传 2.构件图纸上传
        this.uploadType = type;
        this.uploadIndex = index;
        if (type == 1) {
          this.selectFangJianRow = row;
        } else if (type == 2) {
          this.selectGouJianRow = row;
        }
      }, requestUpload(file) {
        this.$message('上传中')
        const data = new FormData();
        data.append('uploadFile', file.raw);
        data.append('module', "loudong");
        requestFile.uploadSingleFile(data, function (percent) {
          console.log(percent)
        }).then(response => {
          let data = response.data
          if (this.uploadType == 1) {
            this.selectFangJianRow.fileAbsPath = data.absPath
            this.selectFangJianRow.fileUrl = data.downloadPath
            //利用这个方法来触发刷新
            this.detail.fangJianFileList.push({})
            this.detail.fangJianFileList.splice(this.detail.fangJianFileList.length - 1, 1)
          } else if (this.uploadType == 2) {
            this.selectGouJianRow.fileAbsPath = data.absPath
            this.selectGouJianRow.fileUrl = data.downloadPath
            //利用这个方法来触发刷新
            this.detail.gouJianFileList.push({})
            this.detail.gouJianFileList.splice(this.detail.gouJianFileList.length - 1, 1)
          }
          this.$message('上传成功')
        })
      }
      , onClickDeleteFangJianBianHaoImg(row, index) {
        if (row.id) {//记录页面标记的id
          this.deleteFangJianFileIds.push(row.id)
        }
        this.detail.fangJianFileList.splice(index, 1)
      }
      , onClickDeleteGouJianImg(row, index) {
        if (row.id) {//记录页面标记的id
          this.deleteGouJianFileIds.push(row.id)
        }
        this.detail.gouJianFileList.splice(index, 1)

      }, getHuXingDetailListByProject(id) {//请求户型(门牌号)item 的列表
        const data = new FormData()
        data.append('projectId', id);

        request.getHuXingDetailListByProject(data).then(response => {
          let addHuXingList = response.data
          //循环判断添加进去
          for (let i = 0; i < addHuXingList.length; i++) {
            let had = false;
            for (let j = 0; j < this.detail.huXingList.length; j++) {
              if (addHuXingList[i].huXingItem.name == this.detail.huXingList[j].huXingItem.name) {
                had = true;
                break;
              }
            }
            if (!had) {
              this.detail.huXingList.push(addHuXingList[i]);
            }
          }

          this.detail.huXingList.sort(function (a, b) {
            return a.huXingItem.name.localeCompare(b.huXingItem.name)
          })


        })
      }


    }
  }
</script>
<style>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

  .svg-external-icon {
    background-color: currentColor;
    mask-size: cover !important;
    display: inline-block;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 400px;
    height: 300px;
    line-height: 300px;
    text-align: center;
  }

  /*清除type=number的上下箭头*/
  /* 在Chrome浏览器下 */
  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  /* 在Firefox浏览器下 */
  input[type="number"] {
    -moz-appearance: textfield;
  }

  .my-number .el-input .el-input__inner {
    text-align: left;
  }

  .tip {
    color: red;
  }
</style>
